<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>类别信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="images/icons/favicon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="styles/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="styles/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/all.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
</head>
<body>
<!-- 页面内容开始 -->
<div class="page-content">
    <div id="tab-general">
        <div class="row mbl">
            <div class="col-lg-12">
                <div class="col-md-12">
                    <div id="area-chart-spline" style="width: 100%; height: 300px; display: none;"></div>
                </div>                                
            </div>

            <div class="col-lg-12">
				<div class="row">
                    <div class="col-md-12">					
                        <div class="row mtl">
                            <div class="col-md-1"></div>
                            <div class="col-md-10">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab-edit" data-toggle="tab">类别录入</a></li>
                                    <li><a href="#tab-messages" data-toggle="tab">类别列表</a></li>
                                </ul>								
								
                                <div id="generalTabContent" class="tab-content">
									<!-- 类别录入开始 -->
                                    <div id="tab-edit" class="tab-pane fade in active">
                                        <form action="/BeautyClub/category/create.do" id="categoryForm" method="post" class="form-horizontal" enctype="multipart/form-data">
                                            <h3>类别信息</h3>
                                            <div class="form-group"><label class="col-sm-3 control-label">类别名称</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9">
															<input type="text" placeholder="请输入类别名称" name="cName" class="form-control category-name"/>
															<input type="hidden" value="" name="cId"/>
														</div>
                                                    </div>
                                                </div>
                                            </div>                                            
                                            <div class="form-group"><label class="col-sm-3 control-label">类别</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9">
                                                            <div class="radio">
																<label class="radio-inline"><input type="radio" value="0" id="cccc" name="categoryType" checked/>&nbsp;一级类别</label>
																<label class="radio-inline"><input type="radio" value="1" id="cccc" name="categoryType"/>&nbsp;二级类别</label>
															</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>											
                                            <div class="form-group"><label class="col-sm-3 control-label">所属一级类别</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                        	<select class="form-control category-first" name="parentId">
                                                            	<option value="0">--请选择--</option>                                                            
                                                        	</select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="form-group"><label class="col-sm-3 control-label">类别logo</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-4">                                                   	
                                                        	<input id="logo-uploadImg" type="file" accept=".jpg,.jpeg,.png" class="form-control current-price" name="pic"/>
                                                        	<img id="logo-uploadImg-show"></img> 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                                                     
                                            <div class="form-group"><label class="col-sm-3 control-label">类别介绍</label>
                                                <div class="col-sm-9 controls">
                                                    <div class="row">
                                                        <div class="col-xs-9"><textarea rows="3" name="introduce" class="form-control category-introduce"></textarea></div>
                                                    </div>
                                                </div>
                                            </div>											
                                            <hr/>                                            
                                            <button type="submit" class="btn btn-green btn-block" onclick="submitReserve();return false;">提 交</button>
                                        </form>
                                    </div>
									<!-- 类别录入结束 -->
									
									<!-- 类别列表开始 -->
                                    <div id="tab-messages" class="tab-pane fade in">
                                        <div class="row mbl">
                                        	<span style="margin-left: 15px"></span>
											<span class="fa fa-star text-yellow mrm mlm"></span>一级类别
											<span class="fa fa-star mrm mlm"></span>二级类别                                        
                                        </div>
                                        <div class="list-group category-list">
											<!-- 类别列表 -->
										</div>
                                    </div>
									<!-- 类别列表结束 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页面内容结束 -->

<script src="script/jquery-1.10.2.min.js"></script>
<script src="script/jquery-migrate-1.2.1.min.js"></script>
<script src="script/jquery-ui.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/bootstrap-hover-dropdown.js"></script>
<script src="script/html5shiv.js"></script>
	
<script src="script/jquery.metisMenu.js"></script>
<script src="script/jquery.slimscroll.js"></script>
<script src="script/icheck.min.js"></script>
    
<script src="script/jquery.menu.js"></script>
<script type="text/javascript" src="script/layer/layer.js"></script>	
<!--CORE JAVASCRIPT-->
<script src="script/main.js"></script>
<script src="script/myjs/reserve.js"></script>
<script type="text/javascript" src="js/jquery-form.js"></script>
<script>

window.onload = function(){
	getMainType();
	getCategory();
	$('#logo-uploadImg').change(function(){
		console.log(this)		
		var error = false;
		var name = $("#logo-uploadImg").val();
		if(name == null || name == "")
  			return false;
  		var file = document.getElementById('logo-uploadImg').files[0];
  		if (file) {
	  		var fileType = name.substring(name.lastIndexOf(".")+1).toLowerCase();		  		
	  		if(fileType != "jpg" && fileType != "jpeg" && fileType != "png"){
	  			layer.alert("图片上传格式只支持jpg/jpeg/png",{icon:0});	  			
  		  		error = true;
	  		}else if (file.size > 1024 * 1024 * 5){
	  			layer.alert("文件不能大于5M",{icon:0});
  		  		error = true;
  	  		}
  		}
  		if(error){
  			$('#logo-uploadImg').val("");
		  	$('#logo-uploadImg-show').attr("src","");
		  	$('#logo-uploadImg-show').css({'height':'0px','width':'0px'});
		  	return false;
  		}  		
  		var img = $('#logo-uploadImg-show');
		if(file){
			img[0].src = window.URL.createObjectURL(file);
			$(img[0]).css({'height':'100px','width':'100px'});
		}
	});
}

//提交类别录入
function submitReserve() {
	var cName = $(".category-name").val();
	if(cName==null || cName==""){
		layer.alert("请输入类别名！",{icon:0});		
		return false;
	}		
	var category=$('input:radio[name="categoryType"]:checked').val();	
	if(category=="1"){
		var type = $(".category-first").val();
		if(type==null || type=="" || type=="0"){
			layer.alert("请选择所属一级类别！",{icon:0});
			return false;
		}
	}
	var image = $("#logo-uploadImg").val();
	if(image==null || image==""){
		layer.alert("请选择类别照片！",{icon:0});		
		return false;
	}
	
	// 上传设置
	var options = {
        // 规定把请求发送到那个URL
        url: "/BeautyClub/category/create.do",
        // 请求方式
        type: "post",
        // 服务器响应的数据类型
        //dataType: "json",
        // 请求成功时执行的回调函数
        success: function(data, status, xhr) {	                    
            if(data == "true"){	                	
            	layer.alert("提交成功！",{icon:1});            		
            }else{
            	layer.alert(data,{icon:2});
    		}
        },
        error: function(){
        	layer.alert("与服务器连接失败！",{icon:2});
        }
	};
	$("#categoryForm").ajaxSubmit(options);
}
</script>
</body>
</html>
